<template>
	<view class="map-wrap">
		<map class="map" id="map" ref="map" :longitude="location[0]" :latitude="location[1]" :markers="markers" @markertap="onshow"
		 @callouttap="onshow"></map>
	</view>
</template>

<script>
	import basePath from "@/common/basePath.js"
	import {
		GetObjProperty,
		IsArray
	} from "@/common/common.js"

	const marks = {
		"basic": (info) => {
			return {
				id: GetObjProperty(info, "id"),
				latitude: IsArray(GetObjProperty(info, "point"))[1],
				longitude: IsArray(GetObjProperty(info, "point"))[0],
				iconPath: GetObjProperty(info, "img"),
				// iconPath: "https://yg-iot-oss.oss-cn-chengdu.aliyuncs.com/icon/ic_moisture.png",
				zIndex: '1',
				width: 30,
				height: 30,
				anchor: {
					x: 0.5,
					y: 1
				},
				callout: {
					content: GetObjProperty(info, "name"),
					display: 'ALWAYS',
					padding: 10,
					bgColor: '#FFFFFF',
					borderRadius: 4,
					color: '#333333',
					fontSize: 12
				}
			}
		},
	}

	export default {
		data() {
			return {
				location: [104.06592249870302, 30.657445192337036],
				markers: [],
			}
		},
		onReady() {
			this.map = uni.createMapContext("map", this)
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: "加载中...",
				})
				uni.request({
					url: `${basePath}/equipment/mapIotList`,
					method: "GET",
					data: {},
					complete() {
						uni.hideLoading()
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")
						
						if (resData.code === 200 && resData.success) {
							let data = IsArray(GetObjProperty(resData, "data"))

							if (data.length) this.location = data[0].point

							this.markers = data.map(item => marks.basic(item))
						} else {
							uni.showToast({
								title: resData.uiMsg,
								icon: "none",
							})
						}
					},
				})
			},
			onshow(e) {
				uni.navigateTo({
					url: `/pages/equipment/details?equId=${e.detail.markerId}`,
				})
			},
		},
	}
</script>

<style>
	.map-wrap {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.map {
		width: 750rpx;
		height: 100vh;
	}
</style>
